<template>
  <a-col
    :span="config.span"
    :offset="config.offset"
    :order="config.order"
  >
    <template v-for="(item, index) in formList" :key="index">
      <template v-if="item.group === 'container'">
        <component
          :id="item.id"
          :is="item.component + 'Render'"
          v-model="formModel"
          :item="item"
          :item-config="item.itemConfig"
          :config="item.config"
        />
      </template>
      <template v-else>
        <component
          :is="item.component"
          :id="item.id"
          v-model="formModel[item.id]"
          :item="item"
          :item-config="item.itemConfig"
          :config="item.config"
        />
      </template>
    </template>
  </a-col>
</template>

<script lang="ts" setup>
import { defineModel, defineProps } from 'vue';

const props = defineProps({
  id: {
    type: String,
    default: () => ''
  },
  item: {
    type: Object,
    default: () => {
    }
  },
  itemConfig: {
    type: Object,
    default: () => {
    }
  },
  config: {
    type: Object,
    default: () => {
    }
  }
});

const formList = defineModel('list', { type: Array, default: [] });

const formModel = defineModel('model', { type: Object, default: {} });
</script>

<script lang="ts">
export default {
  name: 'GridColContainerRender'
};
</script>

<style lang="less" scoped>
</style>